<template>
  <div id="dataSimulation">
    <div class="tab">
      <tab :eltabs="this.eltabs" @tabIndex="showTab" :activeName="tab_activeName"></tab>
    </div>
    <div class="paramBox" :class="this.activeIdx === 1 ? '_block' : '_none'">
      <div style="overflow: hidden;">
        <el-upload
          class="upload-demo"
          action="/simulation/upload_file"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="readCallback"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          :file-list="fileList"
          style="display: inline-block;float: left;"
        >
          <el-button size="medium" type="primary" style="margin-bottom: 0.4rem;font-size: 0.2rem;">数据导入</el-button>
        </el-upload>
        <el-button size="medium" type="primary" @click="clickImg" style="margin:0 0 0.4rem 0.4rem;font-size: 0.2rem;display: inline-block;float: left;">查看导入样例</el-button>
      </div>
      <img v-if="showImg" :src="imgSrc" id="img" style="display: block;margin: 0 auto;">
      <form-params :tableData="this.fromRegulation" @generateRes="generateResult" @tabIndex="showTab"></form-params>
    </div>
    <div class="dataTable" id="dataSimuTable" :class="this.activeIdx === 1 ? '_none' : '_block'">
      <el-button size="medium" type="primary" style="margin:0 0 0.4rem 0;font-size: 0.2rem;display: inline-block;"><a style="color:#eee !important;" href="/simulation/download_process" >下载结果</a></el-button>
      <!-- <data-tables :tableData='table1' :tableTitle='title1' :height="'6rem'"></data-tables> -->
      <table-generate :title="title1" :tableData='table1'></table-generate>
    </div>
  </div>
</template>

<script>
import formParams from '../components/form.vue'
import tab from '../components/tab.vue'
import dataTables from '../components/table.vue'
import tableGenerate from '../components/table_generate.vue'
export default {
  name: 'dataSimulation',
  components: {
    formParams,
    tab,
    dataTables,
    tableGenerate
  },
  data () {
    return {
      activeIdx: 1,
      fileList: [],
      fromRegulation: {},
      showImg: false,
      imgSrc: require('./../assets/images/1.png'),
      eltabs: [
        {id: '1', name: '参数设定'},
        {id: '2', name: '数据生成'}
      ],
      exampleData: {
        '工序1': {
          '工艺参数': [{a: 1, b: 2}, {a: 111, b: 222}],
          '中间检': [{k: 4, x: 3}, {k: 44, x: 33}, {k: 444, x: 333}]
        },
        '工序2': {
          '工艺参数': [{f: 12, g: 42}],
          '中间检': [{h: 64, m: 38}]
        }
      },
      table1: [],
      title1: {},
      tableAction1: {
        props: {
          label: '操作'
        },
        buttons: [
          {
            props: {
              // type: 'primary',
              icon: 'fa fa-link',
              title: '查看详情',
              style: 'color: #606266'
            },
            handler: row => {
              let routeData = this.$router.resolve({path: '/informationDetails', query: {}})
              window.open(routeData.href, '_blank')
            }
            // label: '编辑'
          },
          {
            props: {
              // type: 'primary',
              icon: 'fa fa-trash',
              title: '删除',
              style: 'color: #606266'
            },
            handler: row => {
              this.$confirm('您确定要上报此内容吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$alert('删除成功。', '提示', {
                  callback: action => {
                    console.log(action)
                  }
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
            }
            // label: '删除'
          }
        ]
      },
      tab_activeName:'1'
    }
  },
  methods: {
    showTab (tab) {
      this.activeIdx = Number(tab)
      this.tab_activeName = tab
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    readCallback (response, file, fileList) {
      this.fromRegulation = response
    },
    generateResult (data) {
      var result = JSON.parse(data)
      // var keys = Object.keys(result[0])
      // var titleVal = []
      // keys.forEach(item => {
      //   titleVal.push({label: item, prop: item})
      // })
      // setTimeout(() => {
      //   this.title1 = titleVal
      //   this.table1 = result
      // }, 200)
      // let relData = []
      // console.log(result)
      for (var k in result) {
        this.title1[k] = {}
        for (var k1 in result[k]) {
          // 工序4 工序5 工序终检  ---- 没有中间检
          if(k == '工序4' && k1 == 'sqp'){
            
          }else if(k == '工序5' && k1 == 'sqp'){
            
          }else if(k == '工序终检' && k1 == 'sqp'){
            
          }else {
            this.title1[k][k1] = {}
          }
          
          Object.keys(result[k][k1][0]).forEach(item2 => {
            this.title1[k][k1][item2] = ''
          })
          result[k][k1].forEach((item, index) => {
            // console.log(item)
            // Object.keys(item).forEach(item2 => {
            //   this.title1[k][k1][item2] = ''
            // })
            // this.title1[k][k1][item.field] = ''
            // if (klist.indexOf(item.field) === -1) {
            //   klist.push(item.field)
            // }
            // klist.forEach((item2, index2) => {
            //   t[item2] = item.value.toFixed(5)
            //   this.table1.push(t)
            // })
            if (this.table1[index]) {
              Object.assign(this.table1[index], item)
            } else {
              this.table1.push(item)
            }
          })
        }
      }
      console.log(this.title1)
      console.log(this.table1)
    },
    clickImg () {
      this.showImg = !this.showImg
    },
    DOWNLOAD () {
      this.$api.downloadProcess().then(res => {
        console.log(res)
      })
    }
  },
  mounted () {}
}
</script>

<style lang="scss" scoped="scoped">
#dataSimulation >>> .el-tabs__item {
  font-size: 0.22rem;
  font-weight: 800;
}
#dataSimulation >>> .el-collapse-item__header {
  border-color: #c5c5c5!important;
}
#dataSimulation >>> .formlist {
  .el-input__inner {
    height: 0.4rem;
    line-height: 0.4rem;
  }
  .el-steps {
    width: 80%;
    margin: 0.2rem auto;
  }
  .el-input {
    width: 80%;
  }
  .el-select {
    width: 80%;
    .el-input {
      width: 100%;
      .el-input__inner {
        text-align: center;
      }
    }
  }
  .el-input-number {
    .el-input {
      width: 100%;
    }
  }
}
#dataSimulation >>> .el-divider__text {
  font-size: 0.22rem;
}
#dataSimulation >>> .el-divider {
  background-color: #9c9d9e;
}
#dataSimulation >>> .el-table {
  width: 12.5rem;
}
#dataSimulation >>> .procedure .procedure4_5 {
  .el-select {
    width: 30%;
  }
  .el-input.setnum {
    width: 11%;
  }
}
#dataSimulation >>> .submitBtn {
  .el-form-item__content {
    margin-left: 0!important;
  }
}
#dataSimulation {
  width: 65%;
  padding: 0.3rem;
  // padding: 0.3rem 0.3rem 0.3rem 2rem;
  position: relative;
  margin: 0.2rem auto;
  background: #FFFFFF;
  ._block {
    display: block;
  }
  ._none {
    display: none;
  }
  .tab {
    position: absolute;
    // left: 0;
    left: -1.5rem;
    >>> .el-tabs__item {
      height: 0.7rem;
      line-height: 0.7rem;
    }
  }
  >>> .sc-table {
    .el-table--enable-row-transition .el-table__body td {
      padding: 0.02rem 0!important;
    }
  }
  >>> .el-col-6 {
    display: none;
  }
  
}
#dataSimulation >>> .otherParams .el-step__head.is-success {
  color: #409eff;
  border-color: #409eff;
 }
#dataSimulation >>> .otherParams .el-step__title.is-success {
  color: #409eff;
}
#dataSimuTable >>> table thead tr:nth-child(3) th{
  font-weight: 400;
}
#dataSimuTable >>> table thead tr:nth-child(1) th{
  background: #B5B5B3;
}
#dataSimuTable >>> table thead tr:nth-child(2) th{
  background: #d6d6d4;
}
#dataSimuTable >>> table thead tr:nth-child(3) th{
  background: #f3f3f2;
}
#dataSimuTable >>> table thead tr:nth-child(1) th,
#dataSimuTable >>> table thead tr:nth-child(2) th,
#dataSimuTable >>> table thead tr:nth-child(3) th {
  color:#333
}
</style>
